<template>

  <div>
    <el-alert
      style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
      :closable="false" title="考勤管理"/>
    <el-form style="margin-left: 5px" size="mini" :inline="true" class="demo-form-inline">
      <el-form-item label="部门">
        <el-select v-model="searchForm.departmentId" autocomplete="off">
          <el-option v-for="item in departmentList" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="searchForm.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="searchForm.endTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <!--    <div class="table">-->
    <el-table class="content" tooltip-effect="dark" border
              :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="userVo.realName" label="员工" align="center"/>
      <el-table-column prop="departmentVo.name" label="部门" align="center"/>
      <el-table-column prop="clockNum" label="打卡次数" align="center"/>
      <el-table-column prop="leaveNum" label="请假次数" align="center"/>
      <el-table-column prop="lateNum" label="迟到次数" align="center"/>
      <el-table-column prop="leaveEarlyNum" label="早退次数" align="center"/>
      <!--      <el-table-column-->
      <!--        fixed="right"-->
      <!--        label="操作"-->
      <!--        width="150px">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>-->
      <!--          <el-divider direction="vertical"></el-divider>-->
      <!--          <template>-->
      <!--            <el-popconfirm-->
      <!--              title="这是一段内容确定删除吗？"-->
      <!--              @confirm="deleteFactory(scope.row)"-->
      <!--            >-->
      <!--              <el-button slot="reference" type="text">删除</el-button>-->
      <!--            </el-popconfirm>-->
      <!--          </template>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="align-content: center; align-items: center; margin-left: 15px"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :total="totalCount"
      :page-size="PageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
  <!--  </div>-->
</template>

<script>
import { validatePhone, isIntegerNotMust, isDecimal } from '@/utils/validator'

export default {
  name: 'salary',
  data() {
    return {
      dialogFormVisible: false,
      updateForm: false,
      //添加表单的数据
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      PageSize: 10,
      searchForm: {},
      departmentList: [] //部门
    }
  },

  mounted() {
    // this.load()
    this.loadAllDepartment() //加载部门
    this.search()
  },

  methods: {
    editHandle(id) {
      this.axios.get('/leave/info/' + id).then(res => {
        this.editForm = res.data
        this.dialogFormVisible = true
      })
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    search() {
      this.axios.post('/attendance', this.searchForm).then((resp) => {
          this.tableData = resp.data
          this.totalCount = resp.data.length
        }
      )
    },
    resetSearchForm() {
      this.searchForm = {}
      this.load()
    },
    loadAllDepartment() {
      this.axios.post('/department/select', {}).then(resp => {
        this.departmentList = resp.data
        console.log(this.departmentList)
      })
    },
    // load() {
    //   this.axios.post('/leave/select', {username: JSON.stringify(window.localStorage.getItem('user')).username}).then((resp) => {
    //       this.tableData = resp.data
    //       this.totalCount = resp.data.length
    //     }
    //   )
    // }
  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
